<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印预览</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>打印预览</h1>
            <div class="text-end">
                <button class="btn btn-success" id="printNowBtn">立即打印</button>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                打印机: <strong>{{ printer_name }}</strong>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>纸张大小:</strong> {{ page_size }}</p>
                        <p><strong>方向:</strong> {{ orientation }}</p>
                        <p><strong>颜色模式:</strong> {{ color_mode }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>打印质量:</strong> {{ quality }}</p>
                        <p><strong>双面打印:</strong> {{ duplex }}</p>
                        <p><strong>份数:</strong> {{ copies }}</p>
                    </div>
                </div>

                <hr class="my-4">

                <h5 class="mb-3">文档预览</h5>
                <div class="border p-4" style="background-color: #f8f9fa;">
                    <p class="mb-1">这是一份示例打印文档的内容。</p>
                    <p class="mb-1">选择设置: {{ printer_name }} - {{ page_size }} {{ orientation }}</p>
                    <p>这份文档将被发送到您选择的打印机。</p>
                </div>
            </div>
            <div class="card-footer text-muted">
                作业ID: {{ job_id }}
            </div>
        </div>

        <div class="alert alert-warning" role="alert">
            <i class="bi bi-exclamation-triangle"></i> 在实际应用中，这里会显示实际文档的打印预览
        </div>

        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
            <button type="button" class="btn btn-outline-secondary me-md-2" onclick="history.back()">
                返回修改
            </button>
            <button id="confirmPrint" class="btn btn-primary">
                <i class="bi bi-printer"></i> 确认打印
            </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('printNowBtn').addEventListener('click', function() {
            printJob();
        });
        document.getElementById('confirmPrint').addEventListener('click', function() {
            printJob();
        });

        function printJob() {
            fetch("{{ url_for('printer.print_job') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `job_id={{ job_id }}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('打印任务已成功提交！');
                    window.location.href = "{{ url_for('printer.index') }}";
                } else {
                    alert('打印失败: ' + (data.error || '未知错误'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发生错误: ' + error);
            });
        }
    </script>
</body>
</html>